<template>
<div class="datePicker">
    <DatePicker  :lang="'zh-cn'" @change="dateChange"   v-model:value="dateShow" valueType="format" placeholder="请选择日期"  range></DatePicker>
</div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue"
import DatePicker from 'vue-datepicker-next';
import 'vue-datepicker-next/index.css';
import 'vue-datepicker-next/locale/zh-tw.es'; // <-- import `es` version instead



interface Props{
     date?:any;  //双向绑定日期
}

const props = withDefaults(defineProps<Props>(),{
    date:null
});

const emits = defineEmits<{
    (event:"changeDate",value:any):void;
}>();

const dateChange = (date:any)=>{
     emits(`changeDate`,date)
}

const dateShow = ref<any>(props.date);

</script>
<style scoped lang="scss">
@import "./index.scss";
// @import 'vue-datepicker-next/index.css';

</style>